<template>
  <div>
    <el-form
      label-position="right"
      label-width="80px"
      :model="myform"
      ref="ruleForm"
      :rules="rules"
      class="myform"
    >
      <el-form-item label="电话号码" prop="mobile">
        <el-input type="text" v-model="myform.mobile"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="myform.password" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="anniu" @click="loginTodo">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="请拖动滑块到指定位置" :visible.sync="dialogVisible" width="380px" :center="true">
      <slide-verify
        :l="42"
        :r="10"
        :w="310"
        :h="155"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
        :slider-text="text"
        style="margin:auto"
        ref="slideblock"
      ></slide-verify>
    </el-dialog>
  </div>
</template>

<script>
import { login } from "@/api";
export default {
  name: "App",
  data() {
    return {
      text: "向右滑", // 图片滑动验证码底部文字，
      dialogVisible: false,
      myform: {
        mobile: "",
      },
      rules: {
        mobile: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var phoneReg = /^1(3|5|6|7|8|9)\d{9}$/;
              if (phoneReg.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的手机号码"));
              }
            },
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var passReg = /^[A-Za-z0-9]{4,12}$/;
              if (value.length < 4) {
                callback(new Error("密码长度至少4位"));
              } else if (value.length > 12) {
                callback(new Error("密码长度最多12位"));
              } else if (!passReg.test(value)) {
                callback(new Error("请输入正确的密码"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    if (localStorage.getItem("mobile")) {
      this.myform.mobile = localStorage.getItem("mobile");
    }
  },
  methods: {
    loginTodo() {
      this.$refs.ruleForm.validate((valid) => {
        //表单校验,此处是前端拦截！！！
        if (valid) {
          // console.log(this.myform);//此处是利用写好的rules对表单内容进行校验
          this.dialogVisible = true;
          //   login(this.myform).then((res) => {
          //     if (res.type) {
          //       //判断成功与否
          //       sessionStorage.setItem("token", res.token); //此处的token是后端写好的
          //       localStorage.setItem("mobile", this.myform.mobile); //将手机永久存到本地
          //       this.$router.push({ name: "Index" }); // 登录成功进入主页
          //     }
          //   });
        }
      });
    },
    //滑块验证
    onSuccess() {
      this.$refs.slideblock.reset(); //重置组件
      this.dialogVisible = false; //隐藏组件
      if (this.islogin) {
        //  console.log(this.islogin)
        this.passwordLogin1(); //判断是否其他方式登录
      } else {
        this.$message({
          message: "验证成功！",
          type: "success",
        });
        //  this.getVerificationCode1(); //登录接口
        login(this.myform).then((res) => {
          if (res.type) {
            //判断成功与否
            sessionStorage.setItem("token", res.token); //此处的token是后端写好的
            localStorage.setItem("mobile", this.myform.mobile); //将手机永久存到本地
            this.$router.push({ name: "home" }); // 登录成功进入主页
          }
        });
      } //图片校验成功
    },
    onFail() {
      this.$message.error("验证未通过！");
      this.$refs.slideblock.reset(); //重置组件
      this.dialogVisible = false; //隐藏组件
    },
    onRefresh() {
      this.$message({
        message: "刷新成功！",
        type: "success",
      });
      this.$refs.slideblock.reset(); //重置组件
    },
  },
};
</script>

<style lang="scss" scoped>
.myform {
  padding-right: 50px;
  padding-top: 20px;
}
.anniu {
  width: 100%;
}
</style>